<!--
 * Copyright (c) 2009 The Chromium Authors. All rights reserved.  Use of this
 * source code is governed by a BSD-style license that can be found in the
 * LICENSE file.
-->
<html>
<head>
<title>Screen Capture</title>
<meta charset="UTF-8">
<style type="text/css">
  body {
    font-size: 12px;
    font-family: arial, Verdana;
    margin: 0;
    padding: 0;
    background: #959595;
  }
  #header {
    background: url(images/toolbar_bg.png);
    height: 36px;
    overflow: hidden;
  }
  #showBox {
     overflow: auto;
  }
  #photo {
    cursor: crosshair;
    margin: 0;
    padding: 0;
    position: relative;
  }
  #tip {
    color: #333333;
    padding: 0 5px;
    height: 36px;
    font-size: 13px;
    line-height: 36px;
    overflow: hidden;
    text-align: left;
    margin: 0 180px 0 300px;
  }
  .toolbar {
    position:fixed;
    height: 30px;
    margin-left: 10px;
    padding-top: 6px;
  }
  .toolbar ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
  }
  .toolBar ul li {
    cursor: pointer;
    margin-right: 8px;
    float: left;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#CDDCF0));
    border: 1px solid #788390;
    border-bottom-left-radius: 3px 3px;
    border-bottom-right-radius: 3px 3px;
    border-top-left-radius: 3px 3px;
    border-top-right-radius: 3px 3px;
    color:#333333;
    height: 18px;
    line-height: 18px;
    padding: 2px 8px 2px 8px;
    position: relative;
  }
  .toolBar ul li:hover {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CDDCF0), to(#FEFEFE));
    border: 1px solid #333333;
  }
  .toolbar ul li.mark {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#FEFEFE));
    border: 1px solid #333333;
  }
  .toolbar li .tool {
    float: none;
    border: 1px #333333 solid;
    display: none;
  }
  .toolbar li:hover .tool {
    display: block;
  }
  .toolbar li img {
    position: relative;
    top: 2px;
  }
  .layer {
    font-size:12px;
    font-family: arial;
    height: 0;
    position: absolute;
    width: 0;
    z-index: 100;
    line-height: 22px;
    word-wrap: break-word;
    text-align: left;
    outline: 0;
  }
  .closeButton {
    position: absolute;
    display: none;
    cursor: pointer;
    top: -15px;
  }
  .clear {
    clear: both;
  }
  .tool {
    position: absolute;
    border-radius: 3px 3px;
    border:1px solid #cccccc;
    left: -1;
    top: 23px;
    padding:3px;
    padding:2px 2px 2px 2px;
    background: #ffffff;
    z-index: 9999;
    -webkit-box-shadow: #8B8B8B 0px 4px 10px;
    min-width: 90px;
  }
  #colorpad {
    word-wrap: break-word;
    word-break: normal;
    background-color: #ffffff;
    padding: 4px;
    width: 145px;
  }
  #colorpad a {
    margin: 1px;
    padding: 1px;
    display: block;
    height: 10px;
    width: 10px;
    float: left;
    border: 1px solid #333333;
  }
  .colorBox, .ellipseBox  {
    float: left;
    margin:3px 3px 0 0;
    height:10px;
    width:10px;
    border:1px solid #333333;
  }
  #lineIconCav {
    float: left;
    margin:2px 2px 0 0;
  }
  .rectBox {
    float: left;
    margin:3px 3px 0 0;
    height:12px;
    width:12px;
    background: #000000;
  }
  .blurBox {
    float: left;
    margin:3px 10px 0 5px;
    -webkit-box-shadow:#333333 0px 6px 5px 5px;
  }
  #mask-canvas {
    position: absolute;
    left: 0px;
    top: 0px;
  }
  .tool-option {
    text-indent: 1.5em;
    line-height: normal;
  }
  .tool-option div {
    padding: 4px 0;
    cursor: pointer;
  }
  .tool-option div:hover {
    background-color: #ffffcc;
  }
  .mark {
    background: url(images/mark.png) no-repeat 5px 50%;
  }
  .tool-option-line {
    margin-top: 5px;
    border-top:1px #ccc solid;
  }
  .tool-option-line div{
    float: left;
    padding:5px;
    margin:2px;
    border:1px #ffffff solid;
  }
  .tool-option-line .mark{
    border:1px #cccccc solid;
    background: #ffffcc;
  }
  .tool-option-line div:hover {
    border:1px #cccccc solid;
    background-color: #ffffcc;
  }
  .ellipse {
    width: 9px;
    height: 8px;
    display: block;
    border-radius: 8px 8px;
    border: 1px solid #2a5db0;
  }
  .radiusRect {
    width: 9px;
    height: 8px;
    display: block;
    border-radius:3px 3px;
    border: 1px solid #2a5db0;
  }
  .rect {
    width: 9px;
    height: 8px;
    display: block;
    border: 1px solid #2a5db0;
  }
  .tip_succeed, .tip_failed{
    position :fixed;
    border-radius: 4px 4px;
    height: 30px;
    line-height: 30px;
    top: 5px;
    margin: 0 auto;
    padding: 0 10px;
    font-size: 12px;
  }
  .tip_succeed {
    background: #fff1a8;
    color: #000000;
  }
  .tip_failed {
    color: #ffffff;
    background: #ff8080;
  }
  #selectuploadposition {
    border: 1px solid #ccc;
    width: 300px;
    height: 200px;
    padding: 5px;
    position: absolute;
    z-index: 1000;
    left: 40%;
    top: 25%;
    display: none;
    -webkit-box-shadow: #cccccc 0 0 7px 1px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d0dff2), to(#f5f9fc));
  }
  .selectcontent
  {
    background-color: White;
    width:300px;
    height:168px;
  }
  button {
    cursor: pointer;
  }
  input {
    cursor: pointer;
  }
  #uploadWrapper {
    width: 380px;
    min-height: 255px;
    border: 1px solid #8ec3eb;
    border-radius: 5px;
    position: absolute;
    background: white;
    box-shadow: 0 0 5px 1px #a0a0a0;
    display: none;
    z-index: 10000;
  }
  #uploadHeader {
    border-bottom: 1px solid #aebece;
    height: 33px;
    font-size: 14px;
    font-weight: bold;
    color: #004b80;
    background: -webkit-gradient(linear, left top, left bottom, from(#e4f0ff), to(#b5cce8));
  }
  #uploadBody {
    background: white url("images/popup_bg.jpg") left top no-repeat;
    min-height: 160px;
  }
  #uploadFooter {
    background: -webkit-gradient(linear, left top, left bottom, from(#e2effe), to(#cee1f9));
    height: 36px;
    text-align: right;
    padding-right: 15px;
  }
  #uploadFooter button {
    width: 72px;
    height: 26px;
    vertical-align: middle;
    border:1px solid #8ec3eb;
    color: #1c5f8e;
    border-radius: 3px;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
  }
  #uploadFooter button:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
  }
  .verticalAlignMiddle {
    display: table-cell;
    vertical-align: middle;
    height: inherit;
  }
  #uploadSitesWrapper {
    text-align: center;
    height: 185px;
  }
  .btn {
    display: inline-block;
    text-align: center;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0ecfb));
    border: 1px solid #c0cddd;
    cursor: pointer;
    border-radius: 3px;
  }
  .btn:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#e0ecfb), to(#fff));
    border: 1px solid #8ec3eb;
  }
  #uploadSitesWrapper > span.btn {
    display: inline-block;
    font-size: 18px;
    height: 44px;
    width: 238px;
    text-align: center;
    color: #1c68a2;
    border-radius: 4px;
  }
  #uploadSitesWrapper > span.btn > span.uploadSite > * {
    vertical-align: middle;
  }
  .uploadSite {
    display: inline-block;
    text-align: left;
    width: 180px;
    line-height: 44px;
  }
  #uploadContentWrapper {
    font-weight: bold;
    color: #1c68a2;
  }
  #uploadContentWrapper > div {
    text-align: left;
    padding: 25px 0 0 30px;
  }
  #imageCaption {
    height: 23px;
    padding-left: 5px;
    outline-color: #cbecff;
    margin-left: 10px;
    border: 1px solid #aebece;
    background: -webkit-gradient(linear, left top, left bottom, from(#eefbfa), to(#fff));
    cursor: auto;
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .accountItem {
    padding-bottom: 10px;
  }
  .accountItem > *{
    margin-right: 6px;
  }
  .account {
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
  }
  .account > *, .shareToText {
    vertical-align: middle;
  }
  .account:hover > img{
    visibility: visible;
  }
  .account img {
    visibility: hidden;
    cursor: pointer;
  }
  .accountName {
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 10px;
    display: inline-block;
    max-width: 145px;
    border-bottom: 1px solid #fff;
  }
  .accountName:hover {
    border-bottom: 1px solid #1c68a2;
    cursor: pointer;
  }
  .progressBar {
    display: inline-block;
    vertical-align: middle;
    width: 41px;
    height: 12px;
    background: white url("images/loading_icon.gif") 0 0 no-repeat;
  }
  .photoLink {
    color: #0091ff;
    margin-left: 42px;
    display: none;
  }
  #shareToOtherAccount {
    display: inline-block;
    margin-top: 6px;
    cursor: pointer;
    border-bottom: 1px solid #fff;
  }
  #shareToOtherAccount:hover {
    border-bottom: 1px solid #1c68a2;
  }
  .uploadInfo {
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
  }
  #overlay {
    position: absolute;
    opacity: 0.3;
    background: #000;
    display: none;
    z-index: 200;
    top: 0;
    left: 0;
  }
  #requiredFlag {
    color: red;
  }
  #uploadcontentwrapper > #errorWrapper {
    display: none;
    position: absolute;
    padding: 0;
    text-align: center;
    width: 380px;
    height: 25px;
    margin-bottom: -15px;
  }
  #errorInfo {
    display: inline-block;
    padding: 4px 15px;
    background: #fffed5;
    color: red;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    font-weight: normal;
    white-space: nowrap;
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #authenticationProgress {
    margin-left: 40px;
    display: none;
  }
</style>
<script type="text/javascript" src="editor.js"></script>
<script type="text/javascript" src="sha1.js"></script>
<script type="text/javascript" src="oauth.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="account.js"></script>
<script type="text/javascript" src="upload_ui.js"></script>
<script type="text/javascript" src="facebook.js"></script>
<script type="text/javascript" src="sina_microblog.js"></script>
</head>
<body>
  <div id="header">
  <div id="toolbar" class="toolbar">
   <ul>
    <li id="btnHighlight" class="mark">
    <div class="colorBox" id="highlightColorBox"></div>
    <span id="tHighlight">Highlight</span>
        <div class="tool" id="highlightTool">
        <div id="highlightColorPad"></div>
        <div class="clear"></div>
        <div class="tool-option" style="border-top: 1px solid #ccc; padding-top:2px; margin-top:5px;">
          <div id="borderMode"><span id="border"></span></div>
          <div id="rectMode"><span id="rect"></span></div>
        </div>
        <div class="tool-option-line">
          <div id="rectangle" class="mark"><span class="rect"></span></div>
          <div id="radiusRectangle"><span class="radiusRect"></span></div>
          <div id="ellipse"><span class="ellipse"></span></div>
        </div>
      </div>
    </li>
    <li id="btnBlackout">
      <div class="blurBox" id="blackoutBox"></div>
      <span id="tRedact">Redact</span>
      <div class="tool tool-option">
        <div id="redact" class="mark"><span id="redactText"></span></div>
        <div id="blur" ><span id="blurText"></span></div>
      </div>
    </li>
    <li id="btnText">
    <div class="colorBox" id="fontColorBox"></div>
    <span id="tText">Text</span>
    <div class="tool" id="fontTool">
      <div id="fontColorPad"></div>
      <div class="clear"></div>
      <div class="tool-option" style="border-top: 1px solid #ccc; padding:2px 0 0 0; margin-top:5px">
       <div id="size_10" style="font-size: 10px"></div>
       <div id="size_16" style="font-size: 16px"></div>
       <div id="size_18" style="font-size: 18px"></div>
       <div id="size_32" class="mark" style="font-size: 32px"></div>
     </div>
    </div>
    </li>
    <li id="btnLine">
      <canvas id="lineIconCav" width="14" height="14" ></canvas>
      <span id="lineText"></span>
      <div class="tool">
       <div id="lineColorPad"></div>
       <div class="clear"></div>
       <div class="tool-option-line">
         <div id="straightLine"><img src="images/line.png" alt=""> </div>
         <div id="arrow"><img src="images/arrow.png" alt=""> </div>
       </div>
      </div>
    </li>
  </ul>
  </div>
  <div id="tip"></div>
  <div class="toolbar" id="okBtn" style="position:fixed; right:30px; top:0px;">
   <ul>
    <li id="btnSave" onclick="photoshop.save()">
      <img src="images/icon_save.png" alt="">
      <span id="tSave"></span>
    </li>
    <li id="btnUpload">
      <img src="images/upload.png" alt="">
      <span id="tUpload"></span>
    </li>
    <li id="btnCopy" onclick="photoshop.copy()">
      <img src="images/icon_copy.png" alt="">
      <span id="tCopy"></span>
    </li>
    <li id="btnClose" onclick="photoshop.closeCurrentTab()">
      <img src="images/icon_close.png" alt="">
      <span id="tClose">Close</span>
    </li>
   </ul>
  </div>
  <div class="clear"></div>
  </div>
  <div id="showBox">
  <div id="photo">
  <canvas id="canvas" onSelectStart="return false"></canvas>
  <canvas id="mask-canvas" onSelectStart="return false"></canvas>
  <div class="layer" id="layer0"></div>
  </div>
  </div>
  <div id='selectuploadposition'>
    <div class="selectcontent" >
    <div id="selectPrompt" style="padding:30px 0 0 30px; "></div>
      <div style="padding: 5px 0 0 30px;">
      <div style="padding: 5px 5px;"><input  id="selectSina" type= "radio"><span id="sina"></span></div>
      <div style="padding: 5px 5px;"><input id="selectFacebook" type= "radio"><span id="facebook"></span></div>
      </div>
    </div>
    <div style="float: right; margin: 5px 15px 0 0;"><button id="uploadFile"></button><button id="cancelUpload"></button></div>
  </div>
  <img id="pic" src="#" style="display:none" />
  <embed id="pluginobj" width="0" height="0" type="application/x-screencapture" />
  <div id="uploadWrapper" style="display: none;">
    <div id="uploadHeader">
      <div style="height: 31px; padding-left: 12px; border: 1px solid white; border-top-left-radius: 3px; border-top-right-radius: 3px;">
        <span class="verticalAlignMiddle"></span>
      </div>
    </div>
    <div id="uploadBody">
      <div id="uploadSitesWrapper" class="verticalAlignMiddle">
        <span class="btn" id="sinaMicroblogBtn" style="margin-bottom: 21px;">
          <span class="uploadSite">
            <img src="images/sina_icon.png" alt="sina">
            <span id="shareToSinaMicroblogText"></span>
          </span>
        </span>
        <span class="btn" id="facebookBtn" type="button">
          <span class="uploadSite">
            <img src="images/facebook_icon.png" alt="facebook">
            <span id="shareToFacebookText"></span>
          </span>
        </span>
      </div>
      <div id="uploadContentWrapper" style="display:none;">
        <div id="errorWrapper">
          <div id="errorInfo"></div>
        </div>
        <div style="font-size: 14px; padding-top: 28px;">
          <label id="imageCaptionText" for="imageCaption"></label>
          <input type="text" maxLength="100" id="imageCaption" autofocus="true">
          <span id="requiredFlag">*</span>
        </div>
        <div id="uploadAccountWrapper" style="min-height: 60px;">
          <ul id="uploadAccountList"></ul>
          <div id="shareToOtherAccount"></div>
          <span id="authenticationProgress" class="progressBar"></span>
          <div id="accountItemTemplate" style="display: none;">
            <li id="${accountId}" class="accountItem">
              <span style="display: inline-block;">
                <span class="account">
                  <span class="accountName" title="${accountName}" onclick="UploadUI.upload('${site}', '${userId}');">${accountName}</span>
                  <img src="images/delete_account_icon.png" alt="Delete" title="${deletionTitle}" onclick="UploadUI.deleteAccountItem('${accountId}');">
                </span>
              </span>
              <span class="progressBar" style="display: none;" title="${progressInfo}"></span>
              <span class="uploadInfo" style="display: none;"></span>
              <span style="float: right; margin-right: 35px; font-weight: normal;">
                <a class="photoLink" target="_blank" href="#">${photoLinkText}</a>
              </span>
            </li>
          </div>
        </div>
        <div id="photoSizeTip" style="color: #a4a4a4; font-weight: normal; margin-bottom: 15px;"></div>
      </div>
    </div>
    <div id="uploadFooter">
      <span style="display: inline-block; height: inherit;">
        <span class="verticalAlignMiddle">
          <button id="lastStep" style="display: none;"></button>
          <button id="closeUploadWrapper"></button>
        </span>
      </span>
    </div>
  </div>
  <div id="overlay"></div>
  <script>
  function isHighVersion() {
    var version = navigator.userAgent.match(/Chrome\/(\d+)/)[1];
    return version > 9;
  }
  
  function $(id) {
    return document.getElementById(id);
  }
  function i18nReplace(id, messageKey) {
    return $(id).innerHTML = chrome.i18n.getMessage(messageKey);
  }
  UploadUI.init();

  var bg = chrome.extension.getBackgroundPage();
  var canvas = new Canvas();
  var photoshop = {
    canvas: document.createElement("canvas"),
    tabTitle: '',
    startX: 0,
    startY: 0,
    endX: 0,
    endY: 0,
    dragFlag: false,
    flag: 'rectangle',
    layerId: 'layer0',
    canvasId: '',
    color: '#ff0000',
    highlightColor: '',
    lastValidAction: 0,
    markedArea: [],
    isDraw: true,
    offsetX: 0,
    offsetY: 36,
    nowHeight: 0,
    nowWidth: 0,
    highlightType: 'border',
    highlightMode: 'rectangle',
    text: '',

    i18nReplace: i18nReplace,

    initCanvas: function() {
      $('canvas').width = $('mask-canvas').width = $('photo').style.width =
          photoshop.canvas.width = bg.screenshot.canvas.width;
      $('canvas').height = $('mask-canvas').height = $('photo').style.height =
          photoshop.canvas.height = bg.screenshot.canvas.height;
      var context = photoshop.canvas.getContext('2d');
      context.drawImage(bg.screenshot.canvas, 0, 0);
      context = $('canvas').getContext('2d');
      context.drawImage(photoshop.canvas, 0, 0);
      $('canvas').style.display = 'block';
    },

    init: function() {
      var isMac = bg.screenshot.isThisPlatform('mac');
      if (isMac) {
        $('btnCopy').style.display = 'none';
      }
      photoshop.initTools();
      photoshop.initCanvas();
      photoshop.tabTitle = bg.screenshot.tab.title;
      var showBoxHeight = function() {
        $('showBox').style.height = window.innerHeight - photoshop.offsetY - 1;
      }
      setTimeout(showBoxHeight, 50);
    },

    markCurrentElement: function(element) {
      if (element && element.parentNode) {
        var children = element.parentNode.children;
        for (var i = 0; i < children.length; i++) {
          var node = children[i];
          if (node == element) {
            element.className = 'mark';
          } else {
            node.className = '';
          }
        }
      }
    },

    setHighLightMode: function() {
      photoshop.highlightType = localStorage.highlightType || 'border';
      photoshop.color = localStorage.highlightColor || '#FF0000';
      $(photoshop.layerId).style.border = '2px solid ' + photoshop.color;
      if (photoshop.highlightType == 'rect') {
        $(photoshop.layerId).style.backgroundColor = photoshop.color;
        $(photoshop.layerId).style.opacity = 0.5;
      }
      if (photoshop.flag == 'rectangle') {
        $(photoshop.layerId).style.borderRadius = '0 0';
      } else if (photoshop.flag == 'radiusRectangle') {
        $(photoshop.layerId).style.borderRadius = '6px 6px';
      } else if (photoshop.flag == 'ellipse') {
        $(photoshop.layerId).style.border = '0';
        $(photoshop.layerId).style.backgroundColor = '';
        $(photoshop.layerId).style.opacity = 1;
      }

    },

    setBlackoutMode: function() {
      photoshop.color = '#000000';
      $(photoshop.layerId).style.opacity = 1;
      $(photoshop.layerId).style.backgroundColor = '#000000';
      $(photoshop.layerId).style.border = '2px solid #000000';
    },

    setTextMode: function() {
      localStorage.fontSize = localStorage.fontSize || '16';
      photoshop.color = localStorage.fontColor =
          localStorage.fontColor || '#FF0000';
      $(photoshop.layerId).setAttribute('contentEditable', true);
      $(photoshop.layerId).style.border = '1px dotted #333333';
      $(photoshop.layerId).style.cursor = 'text';
      $(photoshop.layerId).style.lineHeight = localStorage.fontSize + 'px';
      $(photoshop.layerId).style.fontSize = localStorage.fontSize + 'px';
      $(photoshop.layerId).style.color = photoshop.color;
      $(photoshop.layerId).innerHTML = '<br/>';
      $(photoshop.layerId).setAttribute("onblur",
          "photoshop.setTextToArray('" + photoshop.layerId + "')");
      var layer = $(photoshop.layerId);
      layer.addEventListener('click', function() {
        this.style.border = '1px dotted #333333';
      }, true);
      layer.addEventListener('mouseout', function() {
        if (!photoshop.dragFlag) {
          this.style.borderWidth = 0;
        }
      }, false);
      layer.addEventListener('mousemove', function() {
        this.style.border = '1px dotted #333333';
      }, false);
    },

    setTextToArray: function(id) {
      var str = $(id).innerText.split("\n");
      if (photoshop.markedArea.length > 0) {
        for (var i = photoshop.markedArea.length - 1; i >= 0; i--) {
          if (photoshop.markedArea[i].id == id) {
            photoshop.markedArea[i].context = str;
            break;
          }
        }
        $(id).style.borderWidth = 0;
      }
    },

    openOptionPage: function() {
      chrome.tabs.create({url: chrome.extension.getURL("options.html")});
    },

    closeCurrentTab: function() {
      chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.remove(tab.id);
      });
    },

    finish: function() {
      var context = $('canvas').getContext('2d');
      context.drawImage(photoshop.canvas, 0, 0);
    },

    colorRgba: function(color, opacity) {
      var sColor = color.toLowerCase();
      var sColorChange = [];
      for (var i = 1; i < sColor.length; i += 2) {
        sColorChange.push(parseInt("0x" + sColor.slice(i,i + 2)));
      }
      return "rgba(" + sColorChange.join(",") + "," + opacity + ")";
    },

    /**
    * Undo the current operation
    */
    toDo: function(element, what) {
      photoshop.flag = what;
      photoshop.isDraw = true;
      photoshop.markCurrentElement(element);
    },

    setDivStyle: function(x, y) {
      $(photoshop.layerId).setAttribute("style", "");
      $(photoshop.layerId).setAttribute("contentEditable", false);
      switch(photoshop.flag) {
        case 'rectangle':
        case 'radiusRectangle':
        case 'ellipse':
          photoshop.setHighLightMode();
          break;
        case 'redact':
          photoshop.setBlackoutMode();
          break;
        case 'text':
          photoshop.setTextMode();
          break;
        case 'line':
        case 'arrow':
          photoshop.drawLineOnMaskCanvas(x, y, x, y, 'lineStart',
              photoshop.layerId);
          break;
        case 'blur':
          photoshop.createCanvas(photoshop.layerId);
          break;
      }
    },

    /**
    * Create a layer and set style
    */
    createDiv: function() {
      photoshop.lastValidAction++;
      photoshop.layerId = 'layer' + photoshop.lastValidAction;
      if ($(photoshop.layerId)) {
        photoshop.removeElement(photoshop.layerId);
      }
      var divElement = document.createElement('div');
      divElement.id = photoshop.layerId;
      divElement.className = 'layer';
      $('photo').appendChild(divElement);
      if (photoshop.flag  == 'blur') {
        photoshop.createCanvas(photoshop.layerId);
      }
      return divElement;
    },

    createCanvas: function(parentId) {
      photoshop.canvasId = 'cav-' + parentId;
      if (!$(photoshop.canvasId)) {
        var cav = document.createElement('canvas');
        cav.id = photoshop.canvasId;
        cav.width = 10;
        cav.height = 10;
        $(photoshop.layerId).appendChild(cav);
        return cav;
      }
      return $(photoshop.canvasId);

    },

    createCloseButton: function(parent, id, left, top, flag) {
      var imgElement = document.createElement('img');
      imgElement.id = id;
      imgElement.src = 'images/cross.png';
      imgElement.className = 'closeButton';
      imgElement.style.left = left - 15 + 'px';
      if (photoshop.flag == 'line' || photoshop.flag == 'arrow') {
        imgElement.style.left = left / 2 - 5 + 'px';
        imgElement.style.top = top / 2 - 5 + 'px';
      }
      imgElement.onclick = function() {
        $(parent).style.display = 'none';
        photoshop.removeLayer(parent);
      };
      $(parent).onmousemove = function() {
        if (!photoshop.dragFlag) {
          photoshop.showCloseButton(id);
          $(parent).style.zIndex = 110;
          photoshop.isDraw = (flag == 'text' ? false : photoshop.isDraw);
        }
      };
      $(parent).onmouseout = function() {
        photoshop.hideCloseButton(id);
        $(parent).style.zIndex = 100;
        photoshop.isDraw = true;
      };
      $(parent).appendChild(imgElement);
      return imgElement;
    },

    showCloseButton: function(id) {
      $(id).style.display = 'block';
    },

    hideCloseButton: function(id) {
      $(id).style.display = 'none';
      photoshop.isDraw = true;
    },

    removeLayer: function(id) {
      for (var i = 0; i < photoshop.markedArea.length; i++) {
        if (photoshop.markedArea[i].id == id) {
          photoshop.markedArea.splice(i, 1);
          break;
        }
      }
      photoshop.removeElement(id);
    },

    /**
    *  Set the starting point(x,y) when mouse pressed
    */
    onMouseDown: function(event) {
      if (photoshop.isDraw && event.button != 2) {
        photoshop.startX = event.pageX + $('showBox').scrollLeft -
            photoshop.offsetX;
        photoshop.startY = event.pageY + $('showBox').scrollTop -
            photoshop.offsetY;
        photoshop.setDivStyle(photoshop.startX, photoshop.startY);
        photoshop.dragFlag = true;

        $(photoshop.layerId).style.left = photoshop.startX + 'px';
        $(photoshop.layerId).style.top = photoshop.startY + 'px';
        $(photoshop.layerId).style.height = 0;
        $(photoshop.layerId).style.width = 0;
        $(photoshop.layerId).style.display = 'block';
      }
    },

    onMouseUp: function(event) {
      $('mask-canvas').style.zIndex = 10;
      photoshop.endX = event.pageX + $('showBox').scrollLeft -
             photoshop.offsetX;
        if (photoshop.endX > photoshop.canvas.width) {
          photoshop.endX = photoshop.canvas.width ;
        }

        if (photoshop.endX < 0) {
          photoshop.endX = 0;
        }

        photoshop.endY = event.pageY + $('showBox').scrollTop -
             photoshop.offsetY;
        if (photoshop.endY > photoshop.canvas.height) {
          photoshop.endY = photoshop.canvas.height ;
        }
        if (photoshop.endY < 0) {
          photoshop.endY = 0;
        }
      if (photoshop.isDraw && photoshop.dragFlag && (photoshop.endX !=
          photoshop.startX || photoshop.endY != photoshop.startY)) {
        if (photoshop.flag == 'line' || photoshop.flag == 'arrow') {
          photoshop.drawLineOnMaskCanvas(photoshop.startX, photoshop.startY,
              photoshop.endX, photoshop.endY, 'drawEnd', photoshop.layerId);
        } else if (photoshop.flag == 'blur') {
          canvas.blurImage(photoshop.canvas, $(photoshop.canvasId),
              photoshop.layerId, photoshop.startX, photoshop.startY,
              photoshop.endX, photoshop.endY);
        } else if (photoshop.flag == 'ellipse') {
          photoshop.drawEllipseOnMaskCanvas(photoshop.endX,
              photoshop.endY, 'end', photoshop.layerId);
        }
        photoshop.markedArea.push({
          'id': photoshop.layerId,
          'startX': photoshop.startX,
          'startY': photoshop.startY,
          'endX': photoshop.endX,
          'endY': photoshop.endY,
          'width': photoshop.nowWidth,
          'height': photoshop.nowHeight,
          'flag': photoshop.flag,
          'highlightType': photoshop.highlightType,
          'fontSize': localStorage.fontSize,
          'color': photoshop.color,
          'context': ''
        });
        $(photoshop.layerId).focus();
        var imageBtnId = 'close_' + photoshop.layerId;
        photoshop.createCloseButton(photoshop.layerId, imageBtnId,
            photoshop.nowWidth, photoshop.nowHeight, photoshop.flag);
        photoshop.createDiv();
      } else if (photoshop.endX ==
          photoshop.startX && photoshop.endY == photoshop.startY) {
        photoshop.removeElement(photoshop.layerId);
        photoshop.createDiv();
      }
      photoshop.dragFlag = false;

    },

    /**
    * Refresh div‘s height and width when the mouse move
    */
    onMouseMove: function(event) {
      if(photoshop.dragFlag) {
        $('mask-canvas').style.zIndex = 200;
        photoshop.endX = event.pageX + $('showBox').scrollLeft -
             photoshop.offsetX;
        if (photoshop.endX > photoshop.canvas.width) {
          photoshop.endX = photoshop.canvas.width ;
        }

        if (photoshop.endX < 0) {
          photoshop.endX = 0;
        }

        photoshop.endY = event.pageY + $('showBox').scrollTop -
             photoshop.offsetY;
        if (photoshop.endY > photoshop.canvas.height) {
          photoshop.endY = photoshop.canvas.height ;
        }
        if (photoshop.endY < 0) {
          photoshop.endY = 0;
        }
        photoshop.nowHeight = photoshop.endY - photoshop.startY - 1 ;
        photoshop.nowWidth = photoshop.endX - photoshop.startX - 1 ;

        if(photoshop.nowHeight < 0) {
          $(photoshop.layerId).style.top = photoshop.endY + 'px';
          photoshop.nowHeight = -1 * photoshop.nowHeight;
        }
        if(photoshop.nowWidth < 0) {
          $(photoshop.layerId).style.left = photoshop.endX + 'px';
          photoshop.nowWidth = -1 * photoshop.nowWidth;
        }

        $(photoshop.layerId).style.height = photoshop.nowHeight - 3;
        $(photoshop.layerId).style.width = photoshop.nowWidth - 3;
        if (photoshop.flag == 'line' || photoshop.flag == 'arrow') {
          photoshop.drawLineOnMaskCanvas(photoshop.startX, photoshop.startY,
              photoshop.endX, photoshop.endY, 'lineDrawing', photoshop.layerId);
        } else if (photoshop.flag == 'blur') {
          $(photoshop.layerId).style.height = photoshop.nowHeight ;
          $(photoshop.layerId).style.width = photoshop.nowWidth ;
          canvas.blurImage(photoshop.canvas, $(photoshop.canvasId),
              photoshop.layerId, photoshop.startX, photoshop.startY,
              photoshop.endX, photoshop.endY);
        } else if (photoshop.flag == 'ellipse') {
          photoshop.drawEllipseOnMaskCanvas(photoshop.endX,
              photoshop.endY, 'drawing', photoshop.layerId);
        }
      }

    },

    /**
    * Remove a div
    */
    removeElement: function(id) {
      if($(id)) {
        $(id).parentNode.removeChild($(id));
      }
    },

    /**
    * Use fillStyle, fillText and fillRect functions to draw rectangles,
    * and render to canvas
    */
    draw: function() {
      var context = $('canvas').getContext('2d');
      for (var j = 0; j < photoshop.markedArea.length; j++) {
        var mark = photoshop.markedArea[j];
        var x = (mark.startX < mark.endX) ? mark.startX : mark.endX;
        var y = (mark.startY < mark.endY) ? mark.startY : mark.endY;
        var width = mark.width;
        var height = mark.height;
        var color = mark.color;
        switch(mark.flag) {
          case 'rectangle':
            if (mark.highlightType == 'border') {
              canvas.drawStrokeRect(context, color, x, y, width, height, 2);
            } else {
              var color = changeColorToRgba(color, 0.5);
              canvas.drawFillRect(context, color, x, y, width, height);
            }
            break;
          case 'radiusRectangle':
            canvas.drawRoundedRect(
                context, color, x, y, width, height, 6, mark.highlightType);
            break;
          case 'ellipse':
            x = (mark.startX + mark.endX) / 2;
            y = (mark.startY + mark.endY) / 2;
            var xAxis = Math.abs(mark.endX - mark.startX) / 2;
            var yAxis = Math.abs(mark.endY - mark.startY) / 2;
            canvas.drawEllipse(
                context, color, x, y, xAxis, yAxis, 3, mark.highlightType);
            break;
          case 'redact':
            canvas.drawFillRect(context, color, x, y, width, height);
            break;
          case 'text':
            for (var i = 0; i < mark.context.length; i++) {
              canvas.setText(
                  context, mark.context[i], color, mark.fontSize, 'arial',
                  mark.fontSize, x, y + mark.fontSize * i, width);
            }
            break;
          case 'blur':
            var imageData = context.getImageData(
                x, y, photoshop.markedArea[j].width,
                photoshop.markedArea[j].height);
            imageData = canvas.boxBlur(
                imageData, photoshop.markedArea[j].width,
                photoshop.markedArea[j].height, 10);
            context.putImageData(
                imageData, x, y, 0, 0, photoshop.markedArea[j].width,
                photoshop.markedArea[j].height);
            break;
          case 'line':
            canvas.drawLine(
                context, color, 'round', 2,
                mark.startX, mark.startY, mark.endX, mark.endY);
            break;
          case 'arrow':
            canvas.drawArrow(
                context, color, 2, 4, 10, 'round',
                mark.startX, mark.startY, mark.endX, mark.endY);
            break;
        }
      }
    },

    save: function() {
      photoshop.draw();
      var formatParam  = localStorage.screenshootQuality || 'png';
      var dataUrl;
      if (formatParam == 'jpeg' && isHighVersion())
        dataUrl = $('canvas').toDataURL('image/jpeg', 0.5);
      else
        dataUrl = $('canvas').toDataURL('image/png');
      // Here we use the plugin object in showimage.html instead of the plugin object
      // in background page, so that the SaveScreenshot dialog will be a modal dialog.
      var pluginobj = document.getElementById('pluginobj');
      pluginobj.SaveScreenshot(
          dataUrl, photoshop.tabTitle, localStorage.savePath,
          function(success) {
            if (!success)
              alert(chrome.i18n.getMessage('save_fail'));
          },
          chrome.i18n.getMessage("save_image"));
      photoshop.finish();
    },

    copy: function() {
      photoshop.draw();
      var formatParam  = localStorage.screenshootQuality || 'png';
      var dataUrl;
      if (formatParam == 'jpeg' && isHighVersion())
        dataUrl = $('canvas').toDataURL('image/jpeg', 0.5);
      else
        dataUrl = $('canvas').toDataURL('image/png');
      var copyFlag = bg.plugin.saveToClipboard(dataUrl);
      if (copyFlag) {
        photoshop.showTip('tip_succeed', 'tip_copy_succeed');
      } else {
        photoshop.showTip('tip_failed', 'tip_copy_failed');
      }
      photoshop.finish();
    },

    drawLineOnMaskCanvas: function(startX, startY, endX, endY, type, layerId) {
      var ctx = $('mask-canvas').getContext('2d');
      ctx.clearRect(0, 0, $('mask-canvas').width, $('mask-canvas').height);
      if (type == 'drawEnd') {
        var offset = 20;
        var width = Math.abs(endX - photoshop.startX) > 0 ?
            Math.abs(endX - photoshop.startX): 0;
        var height = Math.abs(endY - photoshop.startY) > 0 ?
            Math.abs(endY - photoshop.startY): 0;
        var offsetLeft = parseInt($(layerId).style.left);
        var offsetTop = parseInt($(layerId).style.top);
        startX = startX - offsetLeft + offset / 2;
        startY = startY - offsetTop + offset / 2;
        endX = endX - offsetLeft + offset / 2;
        endY = endY - offsetTop + offset / 2;
        $(layerId).style.left = offsetLeft - offset / 2;
        $(layerId).style.top = offsetTop - offset / 2;
        var cavCopy = photoshop.createCanvas(layerId);
        cavCopy.width = width + offset;
        cavCopy.height = height + offset;
        ctx = cavCopy.getContext('2d');
      }
      if (localStorage.lineType == 'line') {
        canvas.drawLine(ctx, localStorage.lineColor, 'round', 2,
          startX, startY, endX, endY);
      } else {
        canvas.drawArrow(ctx, localStorage.lineColor, 2, 4, 10, 'round',
            startX, startY, endX, endY)
      }

    },

    createColorPadStr: function(type) {
      var colorList = ['#000000', '#808080', '#800000', '#808000', '#008000',
                       '#008080', '#000080', '#800080', '#808040', '#004040',
                       '#0080FF', '#004080', '#8000FF', '#804000', '#FFFFFF',
                       '#C0C0C0', '#FF0000', '#FFF000', '#00FF00', '#00FFFF',
                       '#0000FF', '#FF00FF', '#FFFF80', '#00FF80', '#80FFFF',
                       '#8080FF', '#FF0080'];
      var  colorPadStr = '';
      colorPadStr += '<div id="colorpad">';
      for(var i = 0; i < colorList.length; i++) {
        colorList[i]= '<a href="javascript:photoshop.colorPadPick(\'' + colorList[i] +
            '\',\'' + type + '\');" style="background:' + colorList[i] + ';"></a>';
      }
      colorPadStr = colorPadStr + colorList.join("\n") + '</div>'
      return colorPadStr;
    },

    colorPadPick: function(color, type) {
      photoshop.color = color;
      if(type == 'highlight') {
        localStorage.highlightColor = color;
        photoshop.setHighlightColorBoxStyle(color);
      } else if(type == 'text') {
        localStorage.fontColor = color;
        $('fontColorBox').style.backgroundColor = color;
      } else if (type == 'line') {
        localStorage.lineColor = color;
        photoshop.setLineColorBoxStyle();
      } else if (type == 'ellipse') {
        $('ellipseBox').style.borderColor = color;
      }
    },

    setHighlightColorBoxStyle: function(color) {
      var highlightColorBox = $('highlightColorBox');
      highlightColorBox.style.borderColor = color;
      localStorage.highlightType = localStorage.highlightType || 'border';
      if (localStorage.highlightType == 'border') {
        highlightColorBox.style.background = '#ffffff';
        highlightColorBox.style.opacity = 1;
        $('borderMode').className = 'mark';
        $('rectMode').className = '';
      } else if (localStorage.highlightType == 'rect') {
        highlightColorBox.style.background = color;
        highlightColorBox.style.opacity = 0.5;
        $('borderMode').className = '';
        $('rectMode').className = 'mark';
      }
      if (photoshop.flag == 'rectangle') {
        highlightColorBox.style.borderRadius = '0 0';
      } else if (photoshop.flag == 'radiusRectangle') {
        highlightColorBox.style.borderRadius = '3px 3px';
      } else if (photoshop.flag == 'ellipse') {
        highlightColorBox.style.borderRadius = '12px 12px';
      }
      photoshop.markCurrentElement($(photoshop.flag));
    },

    setBlackoutColorBoxStyle: function() {
      localStorage.blackoutType = localStorage.blackoutType || 'redact';
      if (localStorage.blackoutType == 'redact') {
        $('blackoutBox').className = 'rectBox';
        $('redact').className = 'mark';
        $('blur').className = '';
      } else if (localStorage.blackoutType == 'blur') {
        $('blackoutBox').className = 'blurBox';
        $('redact').className = '';
        $('blur').className = 'mark';
      }
    },

    setFontSize: function(size) {
      var id = 'size_' + size;
      localStorage.fontSize = size;
      $('size_10').className = '';
      $('size_16').className = '';
      $('size_18').className = '';
      $('size_32').className = '';
      $(id).className = 'mark';
    },

    setLineColorBoxStyle: function() {
      localStorage.lineType = localStorage.lineType || 'line';
      photoshop.color = localStorage.lineColor =
          localStorage.lineColor || '#FF0000';
      var ctx = $('lineIconCav').getContext('2d');
      ctx.clearRect(0, 0, 14, 14);
      if (localStorage.lineType == 'line') {
        $('straightLine').className = 'mark';
        $('arrow').className = '';
        canvas.drawLine(ctx, photoshop.color, 'round', 2, 1, 13, 13, 1);
      } else if (localStorage.lineType == 'arrow') {
        $('straightLine').className = '';
        $('arrow').className = 'mark';
        canvas.drawArrow(ctx, photoshop.color, 2, 4, 7, 'round',1, 13, 13, 1);
      }

    },

    initTools: function() {
      photoshop.i18nReplace('tHighlight', 'highlight');
      photoshop.i18nReplace('tRedact', 'redact');
      photoshop.i18nReplace('redactText', 'solid_black');
      photoshop.i18nReplace('tText', 'text');
      photoshop.i18nReplace('tCopy', 'copy');
      photoshop.i18nReplace('tSave', 'save');
      photoshop.i18nReplace('tUpload', 'share');
      photoshop.i18nReplace('tClose', 'close');
      photoshop.i18nReplace('border', 'border');
      photoshop.i18nReplace('rect', 'rect');
      photoshop.i18nReplace('blurText', 'blur');
      photoshop.i18nReplace('lineText', 'line');
      photoshop.i18nReplace('size_10', 'size_small');
      photoshop.i18nReplace('size_16', 'size_normal');
      photoshop.i18nReplace('size_18', 'size_large');
      photoshop.i18nReplace('size_32', 'size_huge');
      var fontSize = localStorage.fontSize = localStorage.fontSize || 16;
      if (fontSize != 10 && fontSize != 16 && fontSize != 18 && fontSize != 32) {
        localStorage.fontSize = 16;
      }
      localStorage.highlightMode = photoshop.flag =
          localStorage.highlightMode || 'rectangle';
      localStorage.highlightColor = localStorage.highlightColor || '#FF0000';
      localStorage.fontColor = localStorage.fontColor || '#FF0000';
      localStorage.highlightType = photoshop.highlightType =
          localStorage.highlightType || 'border';
      localStorage.blackoutType = localStorage.blackoutType || 'redact';
      localStorage.lineType = localStorage.lineType || 'line';
      localStorage.lineColor = localStorage.lineColor || '#FF0000';
      photoshop.setHighlightColorBoxStyle(localStorage.highlightColor);
      $('fontColorBox').style.backgroundColor =
          localStorage.fontColor || '#FF0000';
      $('btnHighlight').addEventListener('click', function() {
        photoshop.toDo(this, localStorage.highlightMode);
        photoshop.setHighlightColorBoxStyle(localStorage.highlightColor);
      }, false);

      $('btnBlackout').addEventListener('click', function() {
        photoshop.toDo(this, localStorage.blackoutType);
        photoshop.setBlackoutColorBoxStyle();
      }, false);

      $('btnText').addEventListener('click', function() {
        photoshop.toDo(this, 'text');
      }, false);

      $('btnLine').addEventListener('click', function() {
        photoshop.toDo(this, localStorage.lineType);
        photoshop.setLineColorBoxStyle();
      }, false);



      photoshop.setHighlightColorBoxStyle(localStorage.highlightColor);
      $('borderMode').addEventListener('click', function() {
        localStorage.highlightType = 'border';
      }, false);
      $('rectMode').addEventListener('click', function() {
        localStorage.highlightType = 'rect';
      }, false);
      $('rectangle').addEventListener('click', function() {
        localStorage.highlightMode = photoshop.flag = 'rectangle';
        photoshop.markCurrentElement(this);
      }, false);
      $('radiusRectangle').addEventListener('click', function() {
        localStorage.highlightMode = photoshop.flag = 'radiusRectangle';
        photoshop.markCurrentElement(this);
      }, false);
      $('ellipse').addEventListener('click', function() {
        localStorage.highlightMode = photoshop.flag = 'ellipse';
        photoshop.markCurrentElement(this);
      }, false);
      photoshop.setBlackoutColorBoxStyle();
      $('redact').addEventListener('click', function() {
        localStorage.blackoutType = 'redact';
      }, false);
      $('blur').addEventListener('click', function() {
        localStorage.blackoutType = 'blur';
      }, false);

      photoshop.setLineColorBoxStyle();

      $('highlightColorPad').innerHTML = photoshop.createColorPadStr('highlight');
      $('fontColorPad').innerHTML = photoshop.createColorPadStr('text');
      $('lineColorPad').innerHTML = photoshop.createColorPadStr('line');

      $('straightLine').addEventListener('click', function() {
        localStorage.lineType = 'line';
        photoshop.setLineColorBoxStyle();
      }, false);
      $('arrow').addEventListener('click', function() {
        localStorage.lineType = 'arrow';
        photoshop.setLineColorBoxStyle();
      }, false);

      photoshop.setFontSize(localStorage.fontSize);
      $('size_10').addEventListener('click', function() {
        photoshop.setFontSize(10);
      }, false);
      $('size_16').addEventListener('click', function() {
        photoshop.setFontSize(16);
      }, false);
      $('size_18').addEventListener('click', function() {
        photoshop.setFontSize(18);
      }, false);
      $('size_32').addEventListener('click', function() {
        photoshop.setFontSize(32);
      }, false);
    },

    drawEllipseOnMaskCanvas: function(endX, endY, type, layerId) {
      var ctx = $('mask-canvas').getContext('2d');
      ctx.clearRect(0, 0, $('mask-canvas').width, $('mask-canvas').height);
      var x = (photoshop.startX + endX) / 2;
      var y = (photoshop.startY + endY) / 2;
      var xAxis = Math.abs(endX - photoshop.startX) / 2;
      var yAxis = Math.abs(endY - photoshop.startY) / 2;
      canvas.drawEllipse(ctx, photoshop.color, x, y, xAxis, yAxis, 3,
          photoshop.highlightType);
      if (type == 'end') {
        var offsetLeft = parseInt($(layerId).style.left);
        var offsetTop = parseInt($(layerId).style.top);
        var startX = photoshop.startX - offsetLeft ;
        var startY = photoshop.startY - offsetTop ;
        var newEndX = photoshop.endX - offsetLeft ;
        var newEndY = photoshop.endY - offsetTop ;
        x = (startX + newEndX) / 2;
        y = (startY + newEndY) / 2;
        xAxis = Math.abs(newEndX - startX) / 2;
        yAxis = Math.abs(newEndY - startY) / 2;
        var cavCopy = photoshop.createCanvas(layerId);
        cavCopy.width = Math.abs(endX - photoshop.startX);
        cavCopy.height = Math.abs(endY - photoshop.startY);
        var ctxCopy = cavCopy.getContext('2d');
        canvas.drawEllipse(ctxCopy, photoshop.color, x, y,
            xAxis, yAxis, 3, photoshop.highlightType);
        ctx.clearRect(0, 0, $('mask-canvas').width, $('mask-canvas').height);
      }
    },

    showTip: function(className, message) {
      var div = document.createElement('DIV');
      div.className = className;
      div.innerText = chrome.i18n.getMessage(message);
      if (arguments.length == 3)
      div.innerHTML = div.innerText + '<a target="_blank" href="' + arguments[2] +'"/>' +
        arguments[2] + '</a>';
      document.body.appendChild(div);
      div.style.left = (document.body.clientWidth - div.clientWidth) / 2 + 'px';
      window.setTimeout(function() {
        document.body.removeChild(div);
      }, 2000);
    },

    showLink: function(className, message, link) {
      var div = document.createElement('DIV');
      div.className = className;
      document.body.appendChild(div);
      div.style.width = (document.body.clientWidth) / 3 + 'px';
      div.style.left = (document.body.clientWidth - div.clientWidth) / 2 + 'px';
      div.innerHTML = chrome.i18n.getMessage(message) + ' <a target="_blank" href="' + link +'"/>' +
        link + '</a>';
      window.setTimeout(function() {
        document.body.removeChild(div);
      }, 10000);
    }
  };

  photoshop.init();
  $('photo').addEventListener('mousemove', photoshop.onMouseMove, true);
  $('photo').addEventListener('mousedown', photoshop.onMouseDown, true);
  $('photo').addEventListener('mouseup', photoshop.onMouseUp, true);
  document.addEventListener('mouseup', photoshop.onMouseUp, true);
  document.addEventListener('mousemove', photoshop.onMouseMove, true);
  </script>
</body>
</html>
